<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>轨道交通大数据服务平台</title>
    <link href="css/bootstrap.css" rel="stylesheet">
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/index.css">
    <!--    <link rel="stylesheet" href="page/css/index1.css">-->
    <script src="page/js/jquery.js"></script>
    <script>
        $(function () {
            $('.myscroll').myScroll({
                speed: 60, //数值越大，速度越慢
                rowHeight: 38 //li的高度
            });
        });

        $(document).ready(function () {
            var whei = $(window).width()
            $("html").css({fontSize: whei / 22});
            $(window).resize(function () {
                var whei = $(window).width();
                $("html").css({fontSize: whei / 22})
            });
        });
    </script>
    <style>
        .t_title {
            width: 100%;
            height: 100%;
            text-align: center;
            font-size: 2.5em;
            line-height: 80px;
            color: #fff;
        }

        #chart_map {
            cursor: pointer;
        }

        .t_show {
            position: absolute;
            top: 0;
            right: 0;
            border-radius: 2px;
            background: #2C58A6;
            padding: 2px 5px;
            color: #fff;
            cursor: pointer;
        }

        #container {
            height: 100%;
            width: 100%;
            margin: 0;
        }
    </style>
</head>
<body>
<!--header-->
<div class="header">
    <div class="bg_header">
        <div class="header_nav fl t_title">
            <a href="#" style="font-size: 20px; color: white;">
                <div class="header-left fl" id="time"></div>
            </a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            成都轨道交通大数据服务平台&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <a href="../../houtai1/index.html" style="font-size: 18px;">>>点击进入后台管理系统</a>
<!--            <h4>Chengdu rail transit big data service platform</h4>-->
        </div>
    </div>
</div>
<!--main-->
<div class="data_content">
    <!--<div class="data_time" >
        温馨提示: 点击模块后跳转至详情页面。
    </div>-->
    <div class="data_main">
        <!--        左边一列盒子-->
        <div class="main_left fl">
            <!--            cursor: pointer;-->
            <div class="left_1 t_btn6" style="cursor: pointer; width: 85%; height: 30%">
                <!--左上边框-->
                <div class="t_line_box">
                    <i class="t_l_line"></i>
                    <i class="l_t_line"></i>
                </div>
                <!--右上边框-->
                <div class="t_line_box">
                    <i class="t_r_line"></i>
                    <i class="r_t_line"></i>
                </div>
                <!--左下边框-->
                <div class="t_line_box">
                    <i class="l_b_line"></i>
                    <i class="b_l_line"></i>
                </div>
                <!--右下边框-->
                <div class="t_line_box">
                    <i class="r_b_line"></i>
                    <i class="b_r_line"></i>
                </div>
                <div class="main_title">
                    <img src="img/t_1.png" alt="">
                    最新路况指数
                </div>
                <div id="chart_1" class="chart" style="width:100%;height: 190px;">重度拥堵</div>

            </div>
            <div class="left_2" style="cursor: pointer; width: 85%; height: 30%">
                <!--左上边框-->
                <div class="t_line_box">
                    <i class="t_l_line"></i>
                    <i class="l_t_line"></i>
                </div>
                <!--右上边框-->
                <div class="t_line_box">
                    <i class="t_r_line"></i>
                    <i class="r_t_line"></i>
                </div>
                <!--左下边框-->
                <div class="t_line_box">
                    <i class="l_b_line"></i>
                    <i class="b_l_line"></i>
                </div>
                <!--右下边框-->
                <div class="t_line_box">
                    <i class="r_b_line"></i>
                    <i class="b_r_line"></i>
                </div>
                <div class="main_title">
                    <img src="img/t_2.png" alt="">
                    最新车辆分布
                </div>
                <div id="chart_2" class="chart t_btn9" style="width:100%;height: 180px;"></div>
            </div>
            <div class="bottom_1 fl t_btn5" style="cursor: pointer;  width: 85%; height: 30%">
                <!--左上边框-->
                <div class="t_line_box">
                    <i class="t_l_line"></i>
                    <i class="l_t_line"></i>
                </div>
                <!--右上边框-->
                <div class="t_line_box">
                    <i class="t_r_line"></i>
                    <i class="r_t_line"></i>
                </div>
                <!--左下边框-->
                <div class="t_line_box">
                    <i class="l_b_line"></i>
                    <i class="b_l_line"></i>
                </div>
                <!--右下边框-->
                <div class="t_line_box">
                    <i class="r_b_line"></i>
                    <i class="b_r_line"></i>
                </div>
                <div class="main_title">
                    <img src="img/t_6.png" alt="">
                    最新热站点信息
                </div>
                <div id="chart_5" class="echart fl" style="width:100%;height: 180px;"></div>
            </div>
        </div>
        <!--        中间地图-->
        <div class="main_center fl">
            <div class="center_text" style="height: 102.5%;width: 830px">
                <!--左上边框-->
                <div class="t_line_box">
                    <i class="t_l_line"></i>
                    <i class="l_t_line"></i>
                </div>
                <!--右上边框-->
                <div class="t_line_box">
                    <i class="t_r_line"></i>
                    <i class="r_t_line"></i>
                </div>
                <!--左下边框-->
                <div class="t_line_box">
                    <i class="l_b_line"></i>
                    <i class="b_l_line"></i>
                </div>
                <!--右下边框-->
                <div class="t_line_box">
                    <i class="r_b_line"></i>
                    <i class="b_r_line"></i>
                </div>
                <div class="main_title">
                    <img src="img/t_3.png" alt="">
                    地图实时监控
                </div>
                <div id="chart_map"></div>
                <div id="container" tabindex="0"></div>
            </div>
        </div>
        <!--        右边-->
        <div class="main_right fr">
            <div class="right_1 t_btn11" style="cursor: pointer; width: 85%; height: 30%; float: right;">
                <!--左上边框-->
                <div class="t_line_box">
                    <i class="t_l_line"></i>
                    <i class="l_t_line"></i>
                </div>
                <!--右上边框-->
                <div class="t_line_box">
                    <i class="t_r_line"></i>
                    <i class="r_t_line"></i>
                </div>
                <!--左下边框-->
                <div class="t_line_box">
                    <i class="l_b_line"></i>
                    <i class="b_l_line"></i>
                </div>
                <!--右下边框-->
                <div class="t_line_box">
                    <i class="r_b_line"></i>
                    <i class="b_r_line"></i>
                </div>
                <div class="main_title">
                    <img src="img/t_4.png" alt="">最新报警信息
                </div>
                <!--                <div id="chart_3" class="echart t_btn7" style="width:100%;height: 280px;"></div>-->
                <div id="FontScroll" class="myscroll">
                    <ul>
                        <li style="font-size: 12px">
                            <div class="fontInner clearfix">
                                    <span>
                                        <b>1</b>
                                    </span>
                                <span>犀浦站</span>
                                <span>拥堵报警</span>
                            </div>
                        </li>
                        <li style="font-size: 12px">
                            <div class="fontInner clearfix">
                                    <span>
                                        <b>2</b>
                                    </span>
                                <span>龙泉站</span>
                                <span>火灾报警</span>
                            </div>
                        </li>
                        <li style="font-size: 12px">
                            <div class="fontInner clearfix">
                                    <span>
                                        <b>3</b>
                                    </span>
                                <span>中医大省医院站</span>
                                <span>故障检修</span>
                            </div>
                        </li>
                        <li style="font-size: 12px">
                            <div class="fontInner clearfix">
                                    <span>
                                        <b>4</b>
                                    </span>
                                <span>地铁线路2</span>
                                <span>高温预警</span>
                            </div>
                        </li>
                        <li style="font-size: 12px">
                            <div class="fontInner clearfix">
                                    <span>
                                        <b>5</b>
                                    </span>
                                <span>A类地铁</span>
                                <span>紧急事件</span>
                            </div>
                        </li>
                        <li style="font-size: 12px">
                            <div class="fontInner clearfix">
                                    <span>
                                        <b>6</b>
                                    </span>
                                <span>B型地铁</span>
                                <span>非正常停靠</span>
                            </div>
                        </li>
                        <li style="font-size: 12px">
                            <div class="fontInner clearfix">
                                    <span>
                                        <b>7</b>
                                    </span>
                                <span>有轨电车</span>
                                <span>交通事故堵塞</span>
                            </div>
                        </li>
                        <li style="font-size: 12px">
                            <div class="fontInner clearfix">
                                    <span>
                                        <b>8</b>
                                    </span>
                                <span>宽窄巷子站</span>
                                <span>人员拥堵</span>
                            </div>
                        </li>
                        <li style="font-size: 12px">
                            <div class="fontInner clearfix">
                                    <span>
                                        <b>9</b>
                                    </span>
                                <span>太古里站</span>
                                <span>人员拥堵</span>
                            </div>
                        </li>
                        <li style="font-size: 12px">
                            <div class="fontInner clearfix">
                                    <span>
                                        <b>10</b>
                                    </span>
                                <span>动物园站</span>
                                <span>医疗事故</span>
                            </div>
                        </li>
                        <li style="font-size: 12px">
                            <div class="fontInner clearfix">
                                    <span>
                                        <b>11</b>
                                    </span>
                                <span>东升站</span>
                                <span>人员拥堵</span>
                            </div>
                        </li>
                        <li style="font-size: 12px">
                            <div class="fontInner clearfix">
                                    <span>
                                        <b>12</b>
                                    </span>
                                <span>天府广场站</span>
                                <span>高温处理</span>

                            </div>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="right_2" style="cursor: pointer; width: 85%; height: 30%; float: right;">
                <!--左上边框-->
                <div class="t_line_box">
                    <i class="t_l_line"></i>
                    <i class="l_t_line"></i>
                </div>
                <!--右上边框-->
                <div class="t_line_box">
                    <i class="t_r_line"></i>
                    <i class="r_t_line"></i>
                </div>
                <!--左下边框-->
                <div class="t_line_box">
                    <i class="l_b_line"></i>
                    <i class="b_l_line"></i>
                </div>
                <!--右下边框-->
                <div class="t_line_box">
                    <i class="r_b_line"></i>
                    <i class="b_r_line"></i>
                </div>
                <div class="main_title">
                    <img src="img/t_5.png" alt="">
                    最新报警类别
                </div>
                <div id="chart_4" class="echart fl t_btn4" style="width:100%;height: 190px;cursor: pointer;"></div>
            </div>
            <div class="bottom_1 fl t_btn10" style="cursor: pointer;  width: 85%; height: 30%; float: right;">
                <!--左上边框-->
                <div class="t_line_box">
                    <i class="t_l_line"></i>
                    <i class="l_t_line"></i>
                </div>
                <!--右上边框-->
                <div class="t_line_box">
                    <i class="t_r_line"></i>
                    <i class="r_t_line"></i>
                </div>
                <!--左下边框-->
                <div class="t_line_box">
                    <i class="l_b_line"></i>
                    <i class="b_l_line"></i>
                </div>
                <!--右下边框-->
                <div class="t_line_box">
                    <i class="r_b_line"></i>
                    <i class="b_r_line"></i>
                </div>
                <div class="main_title">
                    <img src="img/t_7.png" alt="">
                    &nbsp;环境变化情况
                </div>
                <div class="main_table t_btn3" class="echart t_btn7">
                    <div id="chart_6" class="echart fl" style="width:100%;height: 162px;"></div>
                </div>
            </div>
        </div>
    </div>
</div>
<!--<div style="text-align:center;">
<p>轨道交通大数据平台</p>
</div>-->
<!--<script src="//a.amap.com/Loca/static/mock/districts.js"></script>-->
<script src="js/zuobiao.js"></script>
<script src="https://webapi.amap.com/loader.js"></script>
<script>
    AMapLoader.load({ //首次调用 load
        key: '78d2c8a55b62cb049653ace920a563dc',//首次load key为必填
        version: '1.4.15',
        Loca: {
            version: '1.3.2',
        }
    }).then((AMap) => {
        map = new AMap.Map('container', {
            mapStyle: 'amap://styles/1cb196e91d9c8143886b9d2c68eff8d0',
            zoom: 12,
        });
        //中心
        // map.centerAndZoom(new BMap.Point(104.067923463,30.6799428454), 11);
        var layer = new Loca.PointLayer({
            map: map,

        });

        layer.setData(districts, {
            // 指定经纬度所在字段
            lnglat: 'center'
        });

        layer.setOptions({
            style: {
                // 圆形半径，单位像素
                radius: 5,
                // 填充颜色
                color: '#F00',
                // 描边颜色
                borderColor: '#F00',
                // 描边宽度，单位像素
                borderWidth: 1,
                // 透明度 [0-1]
                opacity: 0.9,
            }
        });

        layer.render();
    }).catch((e) => {
        console.log(e);
    });

</script>
</body>
<script src="js/jquery-2.2.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/common.js"></script>
<script src="js/echarts.min.js"></script>
<script src="js/dataTool.js"></script>
<script src="js/index.js"></script>
<script src="js/china.js"></script>
<script src="js/hunan.js"></script>
<script src="page/js/fontscroll.js"></script>
<script>

    //顶部时间
    function getTime() {
        var myDate = new Date();
        var myYear = myDate.getFullYear(); //获取完整的年份(4位,1970-????)
        var myMonth = myDate.getMonth() + 1; //获取当前月份(0-11,0代表1月)
        var myToday = myDate.getDate(); //获取当前日(1-31)
        var myDay = myDate.getDay(); //获取当前星期X(0-6,0代表星期天)
        var myHour = myDate.getHours(); //获取当前小时数(0-23)
        var myMinute = myDate.getMinutes(); //获取当前分钟数(0-59)
        var mySecond = myDate.getSeconds(); //获取当前秒数(0-59)
        var week = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
        var nowTime;

        nowTime = '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;' + myYear + '-' + fillZero(myMonth) + '-' + fillZero(myToday) + '&nbsp;&nbsp;' + fillZero(myHour) + ':' + fillZero(myMinute) + ':' + fillZero(mySecond) + '&nbsp;&nbsp;' + week[myDay] + '&nbsp;&nbsp;';
        //console.log(nowTime);
        $('#time').html(nowTime);
    };

    function fillZero(str) {
        var realNum;
        if (str < 10) {
            realNum = '0' + str;
        } else {
            realNum = str;
        }
        return realNum;
    }

    setInterval(getTime, 1000);

</script>

</html>